<template>
  <div class="m-container">
    <el-carousel height="700px" :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <div
          class="banner-cls"
          :style="`
                background:url(${baseurl+item.url}) center center no-repeat;
                background-size:contain contain;height:700px
                `"
        ></div>
      </el-carousel-item>
      <div class="search-tab"  stretch >

          <el-row>
          <div class="switch-btn" >
            <span v-for="(item ,index) in tabOption" :key="index" @click="handleClick(index)" :class="{active:index===curOption}">
              {{item.name}}
            </span>
          </div>
        </el-row>

          <el-row>
              <el-input v-model="searchContent"  style="width:500px" :placeholder="inputText" @keyup.enter.native="handleSearch(searchContent)">
                <el-button slot="append" icon="el-icon-search"  @click="handleSearch(searchContent)">
                </el-button>
              </el-input>
          </el-row>

      </div>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      bannerList: [],
      tabOption: [
        {
          name: '攻略',
          placerholder: '请输入城市',
          pageUrl: '/post?city='
        },
        {
          name: '酒店',
          placerholder: '请输入酒店所在的城市',
          pageUrl: '/hotel?cityName='
        },
        {
          name: '机票',
          placerholder: '请输入出发地',
          pageUrl: '/plane?city='
        }
      ],
      searchContent: '',
      inputText: '请输入城市',
      curOption: 0,
      baseurl: ''
    }
  },
  created () {

  },
  mounted () {
    this.getBannerList()
  },
  methods: {
    async getBannerList () {
      const { data: res } = await this.$http.get('/scenics/banners')
      this.bannerList = res.data
      this.baseurl = this.$http.defaults.baseURL
    },
    handleClick (index) {
      this.inputText = this.tabOption[index].placerholder
      this.curOption = index
      if (index === 2) {
        this.$router.push('/plane')
      }
    },
    handleSearch (info) {
      const searchCurTab = this.tabOption[this.curOption].pageUrl
      this.$router.push(searchCurTab + info)
    }
  }
}
</script>

<style lang="less" scoped>
.m-container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;
  .banner-cls {
    width: 100%;
    height: 100%;
  }
  .search-tab{
    width: 500px;
    height: 80px;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 10;
    .switch-btn{
      display: flex;
      span{
        display: block;
        width: 80px;
        height: 40px;
        margin-right: 16px;
        background-color: rgba(0, 0, 0, 0.6);
        color: seashell;
        text-align: center;
        line-height: 40px;
        position: relative;
        border-radius: 2px 2px 0 2px;
      }
      .active{
        background-color: rgba(229, 231, 231, 0.5);
        color: rgb(19, 18, 18);

      }
      .active::after{
        border-color: transparent transparent rgba(229, 231, 231, 0.5) transparent;
      }
      span::after{
        content: '';
        display: block;
        position: absolute;
        background-color:transparent;
        right: -16px;
        top: 0;
        width: 0;
        height: 0;
        border-right: 16px solid ;
        border-bottom: 40px solid;
        border-color: transparent transparent rgba(0, 0, 0, 0.6) transparent;
        z-index: 10;
      }
    }
  }
}
</style>
